<template>
<div class="car">
    <van-icon name="revoke" class="goback"  @click="$router.go(-1)"/>
    <van-checkbox-group v-model="result" >
    <!-- <van-checkbox :name="item" v-for="item in cartList" :key="item.id" @click="singleCheckedFn">
        <van-card
        :num="item.number"
        :price="item.retail_price"
        :title="item.goods_name"
        :thumb="item.list_pic_url"
    />
    </van-checkbox> -->
    <van-checkbox :name="item" v-for="item in cartList" :key="item.id" @click="singleCheckedFn">
    <van-card
        :name="item"
        :num="item.number"
        :price="item.retail_price"
        :title="item.goods_name"
        :thumb="item.list_pic_url"
        >

        <template #footer>
            <van-button class="delButton" size="mini" @click.stop="delFn(item.product_id)">删除</van-button>
        </template>
    </van-card>
    </van-checkbox>
    </van-checkbox-group>

    <!-- 订单栏 -->
    <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="checked" @click="checkAllFn">全选</van-checkbox>
        <template #tip>
            你的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址</span>
        </template>
    </van-submit-bar>
</div>
</template>

<script>
import {getCcarData,delCarData} from '@/utils/http'
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: 'Car',
data() {
return {
    result: [],// 选中商品的集合
    cartList:[],// 购物车商品数据
    checked:false,//全选状态
}
},
computed:{
    totalPrice(){
        let sum  = 0
        this.result.forEach(item=>{
            sum += item.retail_price * item.number * 100
        })
            // 计算属性必须得有返回值，需要return出去
            return sum
    }
},
props:[''],
components: {

},
methods: {
    onSubmit(){
        // 修改订单
    },
    onClickEditAddress(){
        // 修改地址
    },
    checkAllFn(){
        // 全选  根据判断checked的状态
        // console.log(this.checked);
        if(this.checked){
            this.result = this.cartList

        }else{
            this.result = []
        }
    },
    singleCheckedFn(){
        // 全不选
        // if(this.result.length === this.cartList.length && this.cartList.length !=0){
        //     this.checked = true
        // }else{
        //     this.checked = false
        // }
        // if 语句的高级写法
      this.checked = this.result.length === this.cartList.length && this.cartList.length !== 0;
    },
    delFn(product_id){
        // this.$event.stopPropagation()
            let toFixed = product_id.toFixed(0)
        delCarData({
            productIds : toFixed
        }).then(res=>{
            console.log(res);
            this.delcarFn()
        })
    },
    // 请求删除数据
    delcarFn(){
        getCcarData().then((res)=>{
        console.log(res);
        this.cartList = res.data.cartList

    })
    }
},
created() {
        this.delcarFn()
},
}
</script>

<style lang='less' scoped>
/deep/.van-checkbox__label{
    flex: 1;
}
/deep/.van-submit-bar{
    bottom: 50px;
}
.delButton{
    width: 50px;
}
/deep/.van-card{
    margin-bottom: 5px;
}
/deep/.van-checkbox-group{
    margin-bottom: 90px;
}
.goback{
        display: block;
        position: fixed;
        top: 5px;
        left: 5px;
        font-size: 30px;
        z-index: 99;
    }
</style>